<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>购买</title>
    <!--新车详情购买
    -->
    
    <link rel="stylesheet" type="text/css" href="../css/swipe.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
      <link rel="stylesheet" type="text/css" href="../css/affirm.css" />
   <style>
    .selectColor{
        outline:none ;
        border: none;
        background:#00afff !important;
        color:#fff !important;
    }
    .screen_sub{
        z-index: 9999;
    }
    #ncPubprice{
        font-size: 16px;
    }.top_img_1 .detail_back{
                margin-top: 3px;
    text-align: center;
    position: fixed;
    z-index: 2000;
    left: 12px;
    width: 18px;
    height: 19px;
    background: #ccc url(../image/sys.png) no-repeat 0 0;
    background-position: 7px -187px;
    font-size: 13px;
    color: #fff;
    border-radius: 100%;
    padding: 15px 15px;
    opacity: 0.7;
    content: "\e6da";
        }
		#color li{margin:0 2.5%;width:28%;}
   </style>
</head>
<body>
<!-- <div class="top_img l"><img src="../../image/v1/1.jpg" alt=""/></div> -->
<div class="top_img_1 l"><a style="position:absolute;top:20px" onClick="$api.closeWin()"><span class="detail_back"></span></a></div>
<div class="demo-wrapper">
      <div class="page-swipe">
        <header>
          <div id="slider" class="swipe" style="visibility: visible;">
            <div class="swipe-wrap" id="swipe_wrap">
              <figure>
                <div class="wrap">
                  <div class="image" style="background:url(../image/1.jpg) center no-repeat;background-size: cover"></div>
                </div>
              </figure>
              <!-- <figure>
                <div class="wrap">
                  <div class="image" style="background:url(../../image/timg.jpg) center no-repeat;background-size: cover"></div>
                </div>
              </figure>  -->
            </div>
          </div>
          <div> <i id="nowPic">0</i>/<i id="totalPic">0</i></div>
          <nav>
            <ul id="position" style="display: none">
              <li class="on"></li>
              <li class=""></li>
              <li class=""></li>
              <li class=""></li>
            </ul>
          </nav>
        </header>
      </div>
    </div>



<div class="affirm_list">
    <ul class="affirm_list_img l"><img src="../image/1.jpg" alt="" id="one_image"/></ul>
    <ul class="affirm_message">
        <li class="price"><span id="ncPubprice">25.00</span><span>万</span></li>
        <li class="mill" style="display: none;">厂商指导价<span id="vcAmount">31.00</span>万</li>
        <li class="mill">库存紧张 <span id="ncTotalnum">50</span>台</li>
    </ul>
</div>


<div class="color_ch clear"><ul>颜色选择</ul>
<ul id="color">
<!-- <li class="color_ch_type"><input class="selectColor"  value="黑色"  type="submit"></li>
<li class="color_ch_type screen_2"><input  value="珍珠白"  type="submit"></li>
<li class="color_ch_type screen_2"><input  value="棕色"  type="submit"></li>
<li class="color_ch_type screen_2"><input  value="银色"  type="submit"></li>
<li class="color_ch_type screen_2"><input  value="红色"  type="submit"></li>
<li class="color_ch_type screen_2"><input  value="白色"  type="submit"></li> -->
</ul>
</div>
<div class="buy_number"><ul><li>购买数量</li>
<li style="padding-top: 3px;">
<div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:70%;float:right; margin-top:3px;">
                            <div class="aui-bar-btn-item" onClick="minus();">
                                <i class="aui-iconfont aui-icon-minus"></i>
                            </div>
                            <div class="aui-bar-btn-item">
                                <input id="number" type="number" class="aui-input aui-text-center" value="1" onKeyUp="numberCheck();" maxlength="2">
                            </div>
                            <div class="aui-bar-btn-item" onClick="add();">
                                <i class="aui-iconfont aui-icon-plus"></i>
                            </div>
                        </div>

</li></ul>

</div>
<div class="buy_number" style="margin-top:0px;"><ul><li>预付定金</li>
<li class="buy_number_1" id="ncDeposits">￥0.00</li></ul>
</div>

<div class="screen_none clear"></div>
<div class="screen_sub ov">		   
       
        <li><input class="affirm_sub_1" value="确认订单"  type="button" onClick="submit();"></li>
         </div>
   

         
<script type="text/javascript" src="../js/aui-scroll.js" ></script>
<script type="text/javascript" src="../js/aui-tab.js" ></script>
<script type="text/javascript" src="../js/key.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/crd-tab.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/swipe.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>

<script type="text/javascript">
    connectedBridge.sendParam();
	var vm={};
	var data ;
	var carId;
	var crduserId
    var num
    var color

	vm.init=function(data11){
        data = data11.data;
		crduserId = data11.cbId//车商id
       // alert(crduserId)
        load(data);
	};
function load(datas){
			//$api.html($api.byId('ncDeposits'), '￥'+datas.ncDeposits);//定金
            $('#vcAmount').html('￥'+datas.vcAmount);
            $('#ncPubprice').html( datas.ncPubprice);
            $('#ncTotalnum').html(parseInt(datas.ncTotalnum) - parseInt(datas.ncOrdernum));
			carId = datas.id;
			var img = '';
			//图片滑动
							var swipe_html = '';
							var total = datas.picStores.length;
							for(var i=0;i<datas.picStores.length;i++){
								if(datas.picStores[i].psContent == '封面照片'){
									img = datas.picStores[i].psPath
								}
								swipe_html += '<figure>'+
									 '<div class="wrap">'+
									 '<div class="image" style="background:url('+fx_imageurl+datas.picStores[i].psPath+') center no-repeat;background-size: cover">'+
									 '</div></div></figure>';

							}
							if(swipe_html!=''){
								$('#swipe_wrap').html(swipe_html);
								$('#totalPic').html(total);
								$('#nowPic').html(1);
							}
							exeSwipe();
			var one_image = $('#one_image');

			$(one_image).attr('src', fx_imageurl+img);
			var temp = datas.vehConfig.vcAppearcolor.split(';');
			var vcAppearcolors = new Array();
			for(var i=0;i<temp.length;i++){
			    vcAppearcolors.push(temp[i].split(':')[0]);
			}
			//var vcAppearcolors = datas.vehConfig.vcAppearcolor.split(';');
			var color_html = '';
			for(var i=0;i<vcAppearcolors.length;i++){
				if(i==0){
					color_html += '<li class="color_ch_type screen_2"><input class="color selectColor" value="'+vcAppearcolors[i]+'"  type="button" onclick="selectColor(this);"></li>'
				}else{
					color_html += '<li class="color_ch_type screen_2"><input class="color " value="'+vcAppearcolors[i]+'"  type="button" onclick="selectColor(this);"></li>'
				}
			}
			$('#color').html(color_html);
		}

		/**
		 * 图片滑动效果
		 */
		function exeSwipe(){
			var bullets = document.getElementById('position').getElementsByTagName('li');
			var slider = Swipe(document.getElementById('slider'), {
				auto: 0,
				continuous: true,
				callback: function(pos) {
					document.getElementById('nowPic').innerHTML = pos + 1;
					/*var i = bullets.length;
					while (i--) {
						bullets[i].className = ' ';
					}
					bullets[pos].className = 'on';*/
				}
			});
		}

		function selectColor(dom){
			var c = $('.color');
			for(var i=0;i<c.length;i++){

				var v = $(c[i]).hasClass('selectColor');
				if(v){
					$(c[i]).removeClass('selectColor');
				}
			}
			$(dom).addClass('selectColor');
		}

		function add(){
			var val = $('#number').val();
			$('#number').val(parseInt(val)+1);
		}

		function minus(){
			var val = $('#number').val();
			if(parseInt(val) > 1 ){
				$('#number').val(parseInt(val)-1);
			}else{
				//api.toast({msg: ERROR_01,duration: 2000, location: 'middle'});
			}
		}
		var number_ = 1;
		function numberCheck(){
			 var   r   =   /^[0-9]{1,2}?$/ ;　　//正整数
			 var val = $('#number').val();
			 //console.log(val+","+r.test(val));
			 if(val!=''){
				if(!r.test(val)){
					$('#number').val(number_)
				 }else{
					number_ = val;
				 }
			 }
		}


		function submit(){
            num = $('#number').val();
			color = '';
            var c = $('.color');
			for(var i=0;i<c.length;i++){
				var v = $(c[i]).hasClass('selectColor');
				if(v){
				   color =  $(c[i]).val();
				   break;
				}
            }
            //
            connectedBridge.getParam(carId+'~'+num+'~'+color);
}

		function closeWin(){
			connectedBridge.goBackPressed();
		}


</script>
</body>

</html>
